import React, { useEffect, useState } from 'react';
const Dialog: React.FC = () => {
    //
    const dialogRef = React.createRef<HTMLDivElement>();

    const [s, setS] = useState(false);

    const handleClick = (e: MouseEvent) => {
        if (dialogRef.current) {
            console.log(dialogRef.current.contains(e.target as HTMLElement));
            if (dialogRef.current.contains(e.target as HTMLElement)) {
                setS(false);
            } else {
                setS(true);
            }
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClick, false);
        return () => {
            document.removeEventListener('click', handleClick, false);
        };
    }, []);

    return (
        <div className="dialog" ref={dialogRef}>
            <h3>Dialog 标题</h3>
            <p>Dialog 内容</p>
            <p>{`${s}`}</p>
        </div>
    );
};

export default () => {
    return (
        <div className="dialog-page">
            <Dialog />
        </div>
    );
};
